import { Metadata } from 'next';
import Link from 'next/link';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import {
  BookOpen,
  Search,
  Clock,
  ArrowRight,
  Star,
  TrendingUp,
  Zap,
  Shield,
  Code,
  Rocket,
} from 'lucide-react';
import { getAllDocs, getDocsByCategory } from '@/lib/docs';

export const metadata: Metadata = {
  title: 'CActor框架文档 | 完整开发指南 - 快速入门、API参考、最佳实践',
  description:
    'CActor框架完整文档：从快速入门到高级应用，包含API参考、金融场景实践、性能优化指南。基于仓颉语言的高性能Actor框架开发文档，助您构建企业级分布式系统。',
  keywords: [
    'CActor文档',
    'Actor框架文档',
    '仓颉语言文档',
    '开发指南',
    'API参考',
    '快速入门',
    '最佳实践',
    '金融场景',
    '性能优化',
    '分布式系统',
    '故障排除',
    '核心概念',
    '企业级',
    '高性能',
    '可扩展',
  ],
  openGraph: {
    title: 'CActor框架文档 | 完整开发指南',
    description:
      'CActor框架完整文档：从快速入门到高级应用，包含API参考、金融场景实践、性能优化指南',
    url: 'https://cactor.dev/docs',
    siteName: 'CActor',
    images: [
      {
        url: '/docs-og-image.png',
        width: 1200,
        height: 630,
        alt: 'CActor框架文档',
      },
    ],
    locale: 'zh_CN',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'CActor框架文档 | 完整开发指南',
    description:
      'CActor框架完整文档：从快速入门到高级应用，包含API参考、金融场景实践、性能优化指南',
    images: ['/docs-twitter-image.png'],
  },
  alternates: {
    canonical: '/docs',
  },
};

/**
 * 文档首页
 * 展示文档分类、特色文档和快速导航
 */
export default async function DocsPage() {
  // 获取所有文档数据
  const categories = getDocsByCategory();
  const allDocs = getAllDocs();
  const featuredDocs = allDocs.filter(doc => doc.meta.featured);
  const recentDocs = allDocs
    .sort(
      (a, b) =>
        new Date(b.meta.updatedAt || b.meta.publishedAt || '').getTime() -
        new Date(a.meta.updatedAt || a.meta.publishedAt || '').getTime()
    )
    .slice(0, 6);

  /**
   * 获取分类图标
   */
  const getCategoryIcon = (categoryName: string) => {
    switch (categoryName) {
      case '快速开始':
        return <Rocket className="h-6 w-6" />;
      case '核心概念':
        return <BookOpen className="h-6 w-6" />;
      case 'API参考':
        return <Code className="h-6 w-6" />;
      case '金融场景':
        return <TrendingUp className="h-6 w-6" />;
      case '最佳实践':
        return <Star className="h-6 w-6" />;
      case '故障排除':
        return <Shield className="h-6 w-6" />;
      default:
        return <BookOpen className="h-6 w-6" />;
    }
  };

  /**
   * 获取分类颜色
   */
  const getCategoryColor = (categoryName: string) => {
    switch (categoryName) {
      case '快速开始':
        return 'from-green-500 to-emerald-600';
      case '核心概念':
        return 'from-blue-500 to-cyan-600';
      case 'API参考':
        return 'from-purple-500 to-violet-600';
      case '金融场景':
        return 'from-orange-500 to-red-600';
      case '最佳实践':
        return 'from-yellow-500 to-amber-600';
      case '故障排除':
        return 'from-gray-500 to-slate-600';
      default:
        return 'from-blue-500 to-cyan-600';
    }
  };

  /**
   * 获取难度颜色
   */
  const getDifficultyColor = (difficulty?: string) => {
    switch (difficulty) {
      case 'beginner':
        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
      case 'intermediate':
        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300';
      case 'advanced':
        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
      default:
        return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300';
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
      {/* 头部区域 */}
      <section className="relative py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <div className="inline-flex items-center space-x-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full text-sm font-medium mb-6">
            <BookOpen className="h-4 w-4" />
            <span>CActor 框架文档</span>
          </div>

          <h1 className="text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6">
            探索 CActor 的
            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              强大功能
            </span>
          </h1>

          <p className="text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto">
            从快速入门到高级应用，全面掌握CActor框架的使用方法。
            构建高性能、可扩展的分布式系统从未如此简单。
          </p>

          {/* 搜索框 */}
          <div className="max-w-md mx-auto mb-8">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
              <Input placeholder="搜索文档..." className="pl-10 h-12 text-lg" />
            </div>
          </div>

          {/* 快速导航按钮 */}
          <div className="flex flex-wrap justify-center gap-4">
            <Button
              asChild
              size="lg"
              className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
            >
              <Link href="/docs/quick-start">
                <Rocket className="mr-2 h-5 w-5" />
                快速开始
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg">
              <Link href="/docs/api-reference">
                <Code className="mr-2 h-5 w-5" />
                API 参考
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg">
              <Link href="/docs/financial-scenarios">
                <TrendingUp className="mr-2 h-5 w-5" />
                金融场景
              </Link>
            </Button>
          </div>
        </div>
      </section>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
        {/* 特色文档 */}
        {featuredDocs.length > 0 && (
          <section className="mb-16">
            <div className="flex items-center space-x-2 mb-8">
              <Star className="h-6 w-6 text-yellow-500" />
              <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
                特色文档
              </h2>
            </div>

            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              {featuredDocs.map(doc => (
                <Card
                  key={doc.slug}
                  className="group hover:shadow-lg transition-all duration-300 border-0 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm"
                >
                  <CardHeader>
                    <div className="flex items-center justify-between mb-2">
                      <Badge
                        className={getDifficultyColor(doc.meta.difficulty)}
                      >
                        {doc.meta.difficulty || 'beginner'}
                      </Badge>
                      <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
                        <Clock className="h-4 w-4 mr-1" />
                        {doc.readingTime.text}
                      </div>
                    </div>
                    <CardTitle className="group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                      {doc.meta.title}
                    </CardTitle>
                    <CardDescription className="line-clamp-2">
                      {doc.meta.description}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center justify-between">
                      <Badge variant="outline" className="text-xs">
                        {doc.meta.category}
                      </Badge>
                      <Button
                        asChild
                        variant="ghost"
                        size="sm"
                        className="group-hover:bg-blue-50 dark:group-hover:bg-blue-900/20"
                      >
                        <Link href={`/docs/${doc.slug}`}>
                          阅读
                          <ArrowRight className="ml-1 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                        </Link>
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </section>
        )}

        {/* 文档分类 */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8">
            文档分类
          </h2>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {categories.map(category => (
              <Card
                key={category.slug}
                className="group hover:shadow-xl transition-all duration-300 border-0 overflow-hidden"
              >
                <div
                  className={`h-2 bg-gradient-to-r ${getCategoryColor(category.name)}`}
                />
                <CardHeader>
                  <div className="flex items-center space-x-3 mb-3">
                    <div
                      className={`p-2 rounded-lg bg-gradient-to-r ${getCategoryColor(category.name)} text-white`}
                    >
                      {getCategoryIcon(category.name)}
                    </div>
                    <div>
                      <CardTitle className="group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                        {category.name}
                      </CardTitle>
                      <div className="flex items-center space-x-2 mt-1">
                        <Badge variant="secondary" className="text-xs">
                          {category.docs.length} 篇文档
                        </Badge>
                      </div>
                    </div>
                  </div>
                  <CardDescription>{category.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2 mb-4">
                    {category.docs.slice(0, 3).map(doc => (
                      <Link
                        key={doc.slug}
                        href={`/docs/${doc.slug}`}
                        className="block text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                      >
                        • {doc.meta.title}
                      </Link>
                    ))}
                    {category.docs.length > 3 && (
                      <div className="text-sm text-gray-500 dark:text-gray-500">
                        还有 {category.docs.length - 3} 篇文档...
                      </div>
                    )}
                  </div>
                  <Button
                    asChild
                    variant="outline"
                    className="w-full group-hover:bg-blue-50 dark:group-hover:bg-blue-900/20"
                  >
                    <Link href={`/docs/${category.docs[0]?.slug || ''}`}>
                      浏览分类
                      <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                    </Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        {/* 最近更新 */}
        <section>
          <div className="flex items-center space-x-2 mb-8">
            <Zap className="h-6 w-6 text-blue-500" />
            <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
              最近更新
            </h2>
          </div>

          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {recentDocs.map(doc => (
              <Card
                key={doc.slug}
                className="group hover:shadow-lg transition-all duration-300"
              >
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between mb-2">
                    <Badge variant="outline" className="text-xs">
                      {doc.meta.category}
                    </Badge>
                    <div className="flex items-center text-xs text-gray-500 dark:text-gray-400">
                      <Clock className="h-3 w-3 mr-1" />
                      {doc.readingTime.text}
                    </div>
                  </div>
                  <CardTitle className="text-lg group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                    {doc.meta.title}
                  </CardTitle>
                  <CardDescription className="text-sm line-clamp-2">
                    {doc.meta.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="flex items-center justify-between">
                    <div className="text-xs text-gray-500 dark:text-gray-400">
                      {doc.meta.updatedAt ? '更新于' : '发布于'}{' '}
                      {new Date(
                        doc.meta.updatedAt || doc.meta.publishedAt || ''
                      ).toLocaleDateString('zh-CN')}
                    </div>
                    <Button asChild variant="ghost" size="sm">
                      <Link href={`/docs/${doc.slug}`}>
                        <ArrowRight className="h-4 w-4" />
                      </Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}
